<!-- 
地面站三维可视化组件
功能：展示多个地面站的三维空间位置
核心能力：
1. 加载全球地形数据
2. 创建地面站坐标点实体
3. 实现坐标点标签显示
4. 支持视角自动定位
-->
<template>
  <div id="cesiumContainer" class="cesium-container">
     </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted, onUnmounted } from 'vue';
let viewer = null;

/**
 * 地面站坐标数据集
 * 数据结构说明：
 * - lon: 经度（WGS84坐标系）
 * - lat: 纬度
 * - height: 高程（米）
 * - name: 站点名称
 * 坐标示例包含中国四个主要城市
 */
const groundStations = [
  { lon: 116.3975, lat: 39.9087, height: 50, name: '北京站' },  // 北京天安门坐标
  { lon: 121.4737, lat: 31.2304, height: 50, name: '上海站' },  // 上海陆家嘴坐标
  { lon: 113.2644, lat: 23.1291, height: 50, name: '广州站' },  // 广州塔坐标
  { lon: 120.1551, lat: 30.2741, height: 50, name: '杭州站' }   // 杭州西湖坐标
];

onMounted(() => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";

  // 创建精简版三维地球实例
viewer = new Cesium.Viewer('cesiumContainer', {
    // terrainProvider: Cesium.createWorldTerrain(),  // 启用全球地形
    timeline: false,     // 禁用时间轴控件
    animation: false    // 隐藏动画控件
  });

  /**
 * 地面站实体创建模块
 * 技术特性：
 * - 红色10像素点状标记
 * - 带半透明背景的白色标签
 * - 标签位置偏移优化
 */
groundStations.forEach(station => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(station.lon, station.lat, station.height), // 坐标转换：WGS84转笛卡尔坐标
    point: {
      color: Cesium.Color.RED,      // 点颜色：红色
      pixelSize: 10,                // 点尺寸：10像素
      disableDepthTestDistance: Infinity // 禁用深度检测（始终可见）
    },
    label: {
      text: station.name,           // 显示站点名称
      font: '14px sans-serif',      // 字体设置
      pixelOffset: new Cesium.Cartesian2(0, -20),
      fillColor: Cesium.Color.WHITE,
      backgroundColor: Cesium.Color.fromAlpha(Cesium.Color.BLACK, 0.7),
      disableDepthTestDistance: Infinity
    }
  });
});

  // 定位到地面站位置
  viewer.zoomTo(viewer.entities);
});

onUnmounted(() => {
  if(viewer) {
    viewer.destroy();
    viewer = null;
  }
});


</script>

<style scoped>
.home-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
</style>